<template>
  <!-- Vue3 新特性：允许多个根组件 -->
  <h1>Hello</h1>
  <h2>{{ number }}</h2>
  <button @click="number++">点击加1</button>
</template>

<script>
  import { onMounted, onUnmounted, onUpdated, ref } from "vue";
  export default {
    name: "App",
    setup() {
      console.log("setup 这里的代码会自动执行");

      onMounted(() => {
        console.log("onMounted1111", document.querySelector("h1"));
      });

      onMounted(() => {
        console.log("onMounted2222", document.querySelector("h1"));
      });

      onUpdated(() => {
        console.log("onUpdated", "响应式数据更新时触发");
      });

      // 子组件内部写 onUnmounted，父组件 v-if="false" 的时候子组件就是触发卸载组件
      onUnmounted(() => {
        console.log("组件卸载时触发");
      });

      const number = ref(0);
      return { number };
    },
  };
</script>
